<template>
  <div>
    <el-table :data="data.content"
              v-loading="loading"
              :border="border"
              :stripe="stripe"
              sum-text
              :size="size"
              :align="align"
              :max-height="maxHeight"
              :show-summary="execSummary"
              @size-change="handleSizeChange"
              @selection-change="selectionChange"
              @current-change="handleCurrentChange"
              :element-loading-text="$t('action.loading')"
              :hightlight-current-row="highlightCurrentRow"
              :show-overflow-tooltip="showOverflowTooltip"
              :header-cell-style="tableHeaderStyle"
              style="width: 95%">
      <!--
            <el-table-column type="selection"
                             width="40"
                             v-if="showBatchDelete & showOperation">
            </el-table-column>
      -->
      <!--  <el-table-column v-for="column in columns"
                         header-align="center"
                         align="center"
                         :key="column.prop"
                         :type="column.type"
                         :prop="column.prop"
                         :label="column.label"
                         :width="column.width"
                         :fixed="column.fixed"
                         :min-width="column.minWidth"
                         :formatter="column.formatter ? numberFormatter:noFormatter"
                         :show-overflow-tooltip="column.showOverflow"
                         :sortable="column.sortable === null? true : column.sortable">
        </el-table-column>-->

      <template v-for="column in columns">
        <!--图片显示-->
        <el-table-column v-if="column.picture"
                         align="center"
                         header-align="center"
                         :key="column.prop"
                         :type="column.type"
                         :prop="column.prop"
                         :label="column.label"
                         :width="column.width"
                         :fixed="column.fixed"
                         :min-width="column.minWidth">
          <template slot-scope="scope">
            <el-popover placement="right" title="" trigger="hover">
              <img :src="scope.row[column.prop]"
                   style="height: 150px;width: 200px"/>
              <img slot="reference"
                   :src="scope.row[column.prop]"
                   :alt="scope.row[column.prop]"
                   style="height: 50px;width: 80px">
            </el-popover>
          </template>
        </el-table-column>

        <!--超链接显示-->
        <el-table-column v-if="column.hrefUrl"
                         align="center"
                         header-align="center"
                         :key="column.prop"
                         :type="column.type"
                         :prop="column.prop"
                         :label="column.label"
                         :width="column.width"
                         :fixed="column.fixed"
                         :min-width="column.minWidth"
                         :show-overflow-tooltip="column.showOverflow">
          <template slot-scope="scope">
            <a :href="scope.row[column.prop]" target="_blank" class="buttonText">{{scope.row[column.prop]}}</a>
          </template>
        </el-table-column>
        <!--其他格式显示-->
        <el-table-column v-if="!column.picture && !column.hrefUrl"
                         align="center"
                         header-align="center"
                         :key="column.prop"
                         :type="column.type"
                         :prop="column.prop"
                         :label="column.label"
                         :width="column.width"
                         :fixed="column.fixed"
                         :min-width="column.minWidth"
                         :formatter="column.formatter ? numberFormatter:noFormatter"
                         :show-overflow-tooltip="column.showOverflow"
                         :sortable="column.sortable === null? true : column.sortable">
        </el-table-column>
      </template>

      <el-table-column :label="$t('action.operation')"
                       width="185"
                       fixed="right"
                       v-if="showOperation"
                       header-align="center"
                       align="center">
        <template slot-scope="scope">
          <kt-button icon="fa fa-edit"
                     :label="$t('action.edit')"
                     :perms="permsEdit"
                     :size="size"
                     type="primary"
                     @click="handleEdit(scope.$index,scope.row)"/>
          <kt-button icon="fa fa-trash"
                     :label="$t('action.delete')"
                     :perms="permsDelete"
                     :size="size"
                     type="danger"
                     @click="handleDelete(scope.$index,scope.row)"/>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolBar" style="padding:10px">
      <kt-button :label="$t('action.batchDelete')"
                 :perms="permsDelete"
                 :size="size"
                 type="danger"
                 :disabled="this.selections.length === 0"
                 style="float:left"
                 v-if="showBatchDelete & showOperation"
                 @click="handleBatchDelete()"/>
      <el-pagination layout="total, sizes, prev, pager, next, jumper"
                     :current-page="pageRequest.pageNum"
                     :page-sizes="[10,15,20,30,50,100]"
                     :page-size="pageRequest.pageSize"
                     :total="data.totalSize"
                     style="float:right"
                     @size-change="refreshSizeRequest"
                     @current-change="refreshPageRequest">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  import KtButton from '@/views/core/KtButton'

  export default {
    name: "KtTable",
    components: {
      KtButton
    },
    props: {
      //表格列配置
      columns: Array,
      //表格页数据
      data: Object,
      //编辑权限标识
      permsEdit: String,
      //删除权限标识
      permsDelete: String,
      //样式尺寸
      size: {
        type: String,
        default: 'mini'
      },
      //文本对齐方式
      align: {
        type: String,
        default: 'left'
      },
      //表格最大高度
      maxHeight: {
        type: Number,
        default: 800
      },
      // 是否显示操作组件
      showOperation: {
        type: Boolean,
        default: true
      },
      // 是否显示边框
      border: {
        type: Boolean,
        default: true
      },
      // 是否显示斑马线
      stripe: {
        type: Boolean,
        default: true
      },
      // 是否高亮当前行
      highlightCurrentRow: {
        type: Boolean,
        default: true
      },
      // 是否单行显示
      showOverflowTooltip: {
        type: Boolean,
        default: true
      },
      // 是否显示操作组件
      showBatchDelete: {
        type: Boolean,
        default: true
      },
      // 是否执行合计统计
      execSummary: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        pageRequest: {
          pageNum: 1,
          pageSize: 20,
          params: {},
        //  includeColumnList: []
        },
        loading: false,
        // 列表选中列
        selections: []
      }
    },
    methods: {
      //表头样式
      tableHeaderStyle() {
        return 'background-color:#1989fa;color:#fff;font-weight:800;'
      },
      //分页查询
      findPage() {
        this.loading = true;
        let callback = res => {
          this.loading = false;
        };
        this.$emit('findPage', {pageRequest: this.pageRequest, callback: callback})
      },
      //选择切换
      selectionChange(selections) {
        this.selections = selections;
        this.$emit('selectionChange', {selections: selections});
      },
      //改变页码
      handleCurrentChange(val) {
        this.$emit('handleCurrentChange', {val: val});
      },
      //改变查询条数
      handleSizeChange(val) {
        this.$emit('handleSizeChange', {val: val});
      },
      //换页码刷新
      refreshPageRequest(pageNum) {
        this.pageRequest.pageNum = pageNum;
        this.findPage();
      },
      //换条数刷新
      refreshSizeRequest(pageSize) {
        this.pageRequest.pageSize = pageSize;
        this.findPage();
      },
      //编辑
      handleEdit(index, row) {
        this.$emit('handleEdit', {index: index, row: row});
      },
      //删除
      handleDelete(index, row) {
        this.delete(row.id);
      },
      //批量删除
      handleBatchDelete() {
        let ids = this.selections.map(it => it.id).toString();
        this.delete(ids);
      },
      //删除操作
      delete(ids) {
        this.$confirm('确认删除选中的记录吗？', '提示', {
          type: "warning"
        }).then(() => {
          let params = [];
          let idArray = (ids + '').split(',');
          for (let i = 0; i < idArray.length; i++) {
            params.push({'id': idArray[i]});
          }
          this.loading = true;
          let callback = res => {
            if (res.code === 200) {
              this.$message({message: '删除成功', type: 'success'});
              this.findPage();
            } else {
              this.$message({message: '操作失败', type: 'error'});
            }
            this.loading = false;
          };
          this.$emit('handleDelete', {params: params, callback: callback});
        }).catch(() => {
        })
      },
      //格式化数字展示两位小数
      numberFormatter(row, column, cellValue, index) {
        let val = row[column.property];
        if (!isNaN(val)) {
          return Number(val).toFixed(2);
        }
        return val;
      },
      //不执行格式化
      noFormatter(row, column, cellValue, index) {
        return row[column.property];
      },
      renderTableHeader(h, {column, $index}) {
        if (column.prop === 'productSales') {
          return h('div', {}, [
            h('span', [column.label]),
            h('el-tooltip', {
              attrs: {
                class: 'item',
                effect: 'dark',
                content: '销售总金额',
                placement: 'bottom'
              }
            }, [
              h('i', {
                'class': 'el-icon-warning table-msg'
              })
            ])
          ])
        }
        return h();
      }
    },
    mounted() {
      //初始化页面获取第1页数据
      this.refreshPageRequest(1);
    }
  }
</script>

<style scoped>

</style>
